<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>四年级英语下册</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>  	
  　    <a href="##" class="navbar-brand">四年级英语下册</a>
  　</div>
  <div class="collapse navbar-collapse navbar-responsive-collapse">  
     <ul class="nav navbar-nav">
	 	<li><a href="#" onclick="goPage(2)">Unit 1</a></li>
		<li><a href="#" onclick="goPage(14)">Unit 2</a></li>
		<li><a href="#" onclick="goPage(26)">Unit 3</a></li>
		<li><a href="#" onclick="goPage(38)">Unit 4</a></li>
		<li><a href="#" onclick="goPage(50)">Unit 5</a></li>
		<li><a href="#" onclick="goPage(62)">Unit 6</a></li>
		<li><a href="#" onclick="goPage(74)">Review</a></li>
		<li><a href="#" onclick="goPage(80)">Words</a></li>
		<li><a href="#" onclick="goPage(83)">Vocabulary</a></li>		
	 </ul>
  </div>
</div>
	  <main>
	  	<div class="container marketing bg-light">
	  		<div class="row featurette">
	  			<img id="imgShow" src="images/2.jpg" class="img-responsive" style="display: block;"/>
	  		</div>
	  		<div class="col-md-4 order-md-2 buttons">
	  			<div class="btn-group">
	  				<!--
					<audio id="player" src="" controls>
					您的浏览器不支持 audio 标签。
					</audio>
					-->  				
	  				<button id="btnPre" class="btn btn-info" onclick="prePage(this)" disabled="disabled">上一页</button>

	  				<button class="btn btn-info" onclick="playMp3(this)">播放</button>
	  				<button id="btnStop" class="btn btn-info" disabled="disabled" onclick="stopMp3(this)">停止</button>
  				
	  				<button id="btnNext" class="btn btn-info" onclick="nextPage(this)">下一页</button>	  				
	  			</div>
	  		</div>
	  	</div>
	  </main>	
	<!--	
	<div id="app">
		name = {{name}}
	</div>

	<script src="https://unpkg.com/vue"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data:{
				name: 'vue'
			}
		});
	</script>
	-->
	<script type="text/javascript">
		var pageNumber = 1;
		var pageTotal = 86;
		var player = document.createElement("AUDIO");
		function prePage(obj){
			pageNumber--;
			document.getElementById("imgShow").src="images/"+pageNumber+".jpg?t="+new Date().getTime();
			if(pageNumber == 0){
				obj.setAttribute("disabled",true);
				alert("已经是第一页了");
			}else{
				obj.removeAttribute("disabled");
			}
			document.getElementById("btnNext").removeAttribute("disabled");
		}
		function nextPage(obj){
			pageNumber++;
			document.getElementById("imgShow").src="images/"+pageNumber+".jpg?t="+new Date().getTime();
			if(pageNumber == pageTotal){
				obj.setAttribute("disabled",true);
				alert("已经是最后一页了");
			}else{
				obj.removeAttribute("disabled");
			}
			document.getElementById("btnPre").removeAttribute("disabled");			
		}
		function goPage(pNum){
			pageNumber = pNum;
			document.getElementById("imgShow").src="images/"+pageNumber+".jpg";
			document.getElementById("btnPre").removeAttribute("disabled");
			document.getElementById("btnNext").removeAttribute("disabled");
		}
		function playMp3(obj){
			if(mapMp3[pageNumber]){
				player.pause();
				player.src="mp3/"+mapMp3[pageNumber];
				player.load();
				player.play();
				document.getElementById("btnStop").removeAttribute("disabled");
			}else{
				alert("没有对应音频");
				//obj.setAttribute("disabled",true);
			}
		}
		function stopMp3(){
			player.pause();
		}
		var mapMp3 = {
			4:	"eed805bfc82877f6361891b3010860a6",
			5:	"eed805bfc82877f6361891b3010860a6",
			6:	"c8a1b3240fb28ca9b9e56be501d111be.mp3",
			7:	"c8a1b3240fb28ca9b9e56be501d111be.mp3",
			8:	"ca6787f31e50359d0435fe78ca897bb8",
			9: 	"ca6787f31e50359d0435fe78ca897bb8",
			10:	"d39b9a693015211066dec13c40b41baa",
			11:	"d39b9a693015211066dec13c40b41baa",
			12:	"d39b9a693015211066dec13c40b41baa",

			16:	"094562ba54d204a2218dd845a19fb203",
			17:	"094562ba54d204a2218dd845a19fb203",
			18:	"23475e6e8e467c08952a4f4befe97d5d",
			19:	"23475e6e8e467c08952a4f4befe97d5d",
			20:	"e296e79c8ca987f32128e53da277caef",
			21:	"e296e79c8ca987f32128e53da277caef",
			22:	"b0f8a81f99588645c986a106ba8a0a14",
			23:	"b0f8a81f99588645c986a106ba8a0a14",
			24:	"b0f8a81f99588645c986a106ba8a0a14",

			28:	"134f939ac38fffa8f59122ddec34cb0b",
			29:	"134f939ac38fffa8f59122ddec34cb0b",
			30:	"4e663a1890c2cdebb505d43dce7f7e57",
			31:	"4e663a1890c2cdebb505d43dce7f7e57",
			32:	"09499bb1907951d868efb34f1aac2a6b",
			33:	"09499bb1907951d868efb34f1aac2a6b",
			34:	"d6e9383da59acfda3daaa044d0a15572",
			35:	"d6e9383da59acfda3daaa044d0a15572",
			36:	"d6e9383da59acfda3daaa044d0a15572",

			40:	"a1d1b08a271bb46ca5e08381c2bf4caa",
			41:	"a1d1b08a271bb46ca5e08381c2bf4caa",
			42:	"d45c8efac40a2a712f1e79a40d3d8751",
			43:	"d45c8efac40a2a712f1e79a40d3d8751",
			44:	"150cf04aaf0aaab43cd23732845fb1a3",
			45:	"150cf04aaf0aaab43cd23732845fb1a3",
			46:	"8cf6749251570dbf7cdc340bbfc6a905",
			47:	"8cf6749251570dbf7cdc340bbfc6a905",
			48:	"8cf6749251570dbf7cdc340bbfc6a905",

			52:	"379a7b0853b71def1733b517dc6a5863",
			53:	"379a7b0853b71def1733b517dc6a5863",
			54:	"01900e0a885195f03b215892eb7f6800",
			55:	"01900e0a885195f03b215892eb7f6800",
			56:	"220ca67e1c6f61a58b93aee9bd629951",
			57:	"220ca67e1c6f61a58b93aee9bd629951",
			58:	"c7836be5f3ae80263d4a28822f8942c9",
			59:	"c7836be5f3ae80263d4a28822f8942c9",
			60:	"c7836be5f3ae80263d4a28822f8942c9",

			64:	"4bf6bca1c79803e1505f1971ac2fcc9a",
			65:	"4bf6bca1c79803e1505f1971ac2fcc9a",
			66:	"d88b29b0f6772509122733a30d127997",
			67:	"d88b29b0f6772509122733a30d127997",
			68: "12382a285d862756f0358efd82c9ddba",
			69: "12382a285d862756f0358efd82c9ddba",
			70: "13bf188aee6321ce69d72ebf6447378f",
			71: "13bf188aee6321ce69d72ebf6447378f",
			72: "13bf188aee6321ce69d72ebf6447378f"
		}	
	</script>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- 	<script>
		$(function () {
			$.getJSON('mp3.json',function(data){
				mapMp3 = data;
			})
		});
	</script> -->
</body>
</html>